import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { Form, Input, Select, Row, Col } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

// const NumericPanel = props => {
//   const { form } = props;
//   return (
//     <Fragment>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.range' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('rangeMin', {
//           rules: [
//             {
//               required: true,
//               message: formatMessage({
//                 id: 'app.dm.product.topic.function.prop.numeric.range.place',
//               }),
//             },
//           ],
//         })(
//           <Input
//             style={{ width: 230 }}
//             placeholder={formatMessage({
//               id: 'app.dm.product.topic.function.prop.numeric.range.min.place',
//             })}
//           />,
//         )}
//       </FormItem>
//       &nbsp; ~ &nbsp;
//       <FormItem colon={false}>
//         {form.getFieldDecorator('rangeMax', {
//           rules: [
//             {
//               required: true,
//               message: formatMessage({
//                 id: 'app.dm.product.topic.function.prop.numeric.range.place',
//               }),
//             },
//           ],
//         })(
//           <Input
//             style={{ width: 230 }}
//             placeholder={formatMessage({
//               id: 'app.dm.product.topic.function.prop.numeric.range.max.place',
//             })}
//           />,
//         )}
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.step' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('step', {
//           rules: [
//             {
//               required: true,
//               message: formatMessage({
//                 id: 'app.dm.product.topic.function.prop.numeric.step.place',
//               }),
//             },
//           ],
//         })(
//           <Input
//             placeholder={formatMessage({
//               id: 'app.dm.product.topic.function.prop.numeric.step.place',
//             })}
//           />,
//         )}
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.unit' })}
//         colon={false}
//       >
//         {form.getFieldDecorator(
//           'unit',
//           {},
//         )(
//           <Input
//             placeholder={formatMessage({
//               id: 'app.dm.product.topic.function.prop.numeric.unit.place',
//             })}
//           />,
//         )}
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.readWriteType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('readWriteType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.readWriteType.rw' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.numeric.readWriteType.r' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//     </Fragment>
//   );
// };

// const BoolPanel = props => {
//   const { form } = props;
//   return (
//     <Fragment>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.bool' })}
//         colon={false}
//       >
//         <p>
//           0 - &nbsp;
//           {form.getFieldDecorator('boolFalse', {
//             rules: [
//               {
//                 required: true,
//                 message: formatMessage({ id: 'app.dm.product.topic.function.prop.bool.place' }),
//               },
//             ],
//           })(
//             <Input
//               style={{ width: 230 }}
//               placeholder={formatMessage({
//                 id: 'app.dm.product.topic.function.prop.bool.false.place',
//               })}
//             />,
//           )}
//         </p>
//       </FormItem>
//       <FormItem colon={false}>
//         <p>
//           1 - &nbsp;
//           {form.getFieldDecorator('boolTrue', {
//             rules: [
//               {
//                 required: true,
//                 message: formatMessage({ id: 'app.dm.product.topic.function.prop.bool.place' }),
//               },
//             ],
//           })(
//             <Input
//               style={{ width: 230 }}
//               placeholder={formatMessage({
//                 id: 'app.dm.product.topic.function.prop.bool.true.place',
//               })}
//             />,
//           )}
//         </p>
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.bool.readWriteType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('readWriteType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.bool.readWriteType.rw' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.bool.readWriteType.r' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//     </Fragment>
//   );
// };

// const TextPanel = props => {
//   const { form } = props;
//   return (
//     <Fragment>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.text.readWriteType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('readWriteType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.text.readWriteType.rw' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.text.readWriteType.r' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//     </Fragment>
//   );
// };

// const DatePanel = props => {
//   const { form } = props;
//   return (
//     <Fragment>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.date.format' })}
//         colon={false}
//       >
//         <span>
//           <FormattedMessage id="app.dm.product.topic.function.prop.date.format.desc" />
//         </span>
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('readWriteType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType.rw' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType.r' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//     </Fragment>
//   );
// };

// const ArrayPanel = props => {
//   const { form } = props;
//   return (
//     <Fragment>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.array.eleType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('eleType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.array.eleType.int32' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.array.eleType.float' })}
//             </Radio>
//             <Radio value={3}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.array.eleType.double' })}
//             </Radio>
//             <Radio value={4}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.array.eleType.text' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.array.length' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('length', {
//           rules: [
//             {
//               required: true,
//               message: formatMessage({
//                 id: 'app.dm.product.topic.function.prop.array.length.place',
//               }),
//             },
//           ],
//           initialValue: 10,
//         })(
//           <InputNumber
//             min={1}
//             max={128}
//             style={{ width: 150 }}
//             placeholder={formatMessage({
//               id: 'app.dm.product.topic.function.prop.array.length.place',
//             })}
//           />,
//         )}
//       </FormItem>
//       <FormItem
//         label={formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType' })}
//         colon={false}
//       >
//         {form.getFieldDecorator('readWriteType', {
//           rules: [{ required: true }],
//           initialValue: 1,
//         })(
//           <Radio.Group>
//             <Radio value={1}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType.rw' })}
//             </Radio>
//             <Radio value={2}>
//               {formatMessage({ id: 'app.dm.product.topic.function.prop.date.readWriteType.r' })}
//             </Radio>
//           </Radio.Group>,
//         )}
//       </FormItem>
//     </Fragment>
//   );
// };

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class ProductFunctionProp extends PureComponent {
  // state = {
  //   showPanelIndex: '1',
  // };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/fetchUnit',
    });
    dispatch({
      type: 'product/fetchDataType',
    });
  }

  // handleTypeChange = value => {
  //   this.setState({
  //     showPanelIndex: value,
  //   });
  // };

  getItemsValue() {
    return this.props.form;
  }

  render() {
    const {
      product: { dataTypeList, unitList },
      form,
    } = this.props;

    // const { showPanelIndex } = this.state;

    // const showPanel = fm => {
    //   if (showPanelIndex === 1 || showPanelIndex === 2 || showPanelIndex === 3) {
    //     return <NumericPanel form={fm} />;
    //   }
    //   if (showPanelIndex === 5) {
    //     return <BoolPanel form={fm} />;
    //   }
    //   if (showPanelIndex === 6) {
    //     return <TextPanel form={fm} />;
    //   }
    //   if (showPanelIndex === 7) {
    //     return <DatePanel form={fm} />;
    //   }
    //   if (showPanelIndex === 9) {
    //     return <ArrayPanel form={fm} />;
    //   }
    //   return null;
    // };

    const renderOption = data =>
      data.map(item => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ));

    return (
      <Fragment>
        <FormItem label={formatMessage({ id: 'app.dm.product.property.info.name' })} colon={false}>
          {form.getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.product.property.info.name.place' }),
              },
            ],
          })(
            <Input
              placeholder={formatMessage({ id: 'app.dm.product.property.info.name.place' })}
            />,
          )}
        </FormItem>

        <FormItem label={formatMessage({ id: 'app.dm.product.property.info.label' })} colon={false}>
          {form.getFieldDecorator('label', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.product.property.info.label.place' }),
              },
            ],
          })(
            <Input
              placeholder={formatMessage({ id: 'app.dm.product.property.info.label.place' })}
            />,
          )}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.dm.product.property.info.datatype' })}
          colon={false}
        >
          {form.getFieldDecorator('dataTypeId', {
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.dm.product.property.info.dataType.place' }),
              },
            ],
          })(
            <Select
              allowClear
              style={{ width: '100%' }}
              placeholder={formatMessage({
                id: 'app.dm.product.property.info.dataType.place',
              })}
            >
              {renderOption(dataTypeList)}
            </Select>,
          )}
        </FormItem>

        <FormItem label={formatMessage({ id: 'app.dm.product.property.info.range' })} colon={false}>
          <Row style={{ width: '100%' }}>
            <Col span={10}>
              {form.getFieldDecorator(
                'minRange',
                {},
              )(
                <Input
                  placeholder={formatMessage({
                    id: 'app.dm.product.property.info.minrange.place',
                  })}
                />,
              )}
            </Col>
            <Col span={2} style={{ textAlign: 'center' }}>
              <span>~</span>
            </Col>
            <Col span={10}>
              {form.getFieldDecorator(
                'maxRange',
                {},
              )(
                <Input
                  placeholder={formatMessage({
                    id: 'app.dm.product.property.info.maxrange.place',
                  })}
                />,
              )}
            </Col>
          </Row>
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.dm.product.property.info.unit' })} colon={false}>
          {form.getFieldDecorator(
            'unitId',
            {},
          )(
            <Select
              allowClear
              style={{ width: '100%' }}
              placeholder={formatMessage({ id: 'app.dm.product.property.info.unit.place' })}
            >
              {renderOption(unitList)}
            </Select>,
          )}
        </FormItem>
        <FormItem
          label={formatMessage({ id: 'app.dm.product.property.info.more.desc' })}
          colon={false}
        >
          {form.getFieldDecorator('desc', {
            rules: [],
          })(<TextArea rows={4} />)}
        </FormItem>
      </Fragment>
    );
  }
}

export default ProductFunctionProp;
